<template>
    <el-container style="height: 100%">
        <el-header style="position: fixed;z-index: 9;width: 100%">
            <h1 class="title">
                        <span style="color: #5f5b5b">
                            当前位置 ：
                        </span>
                <span @click="to(HomePage)" style="cursor:pointer">通信数据调查<i
                        class="el-icon--right el-icon-right"></i></span>
                发布通信调查任务
            </h1>
        </el-header>
        <el-main style="background: #F0F0F066;margin-top:45px">
            <el-row>
                <el-col :span="24">
                    <el-row :gutter="10">
                        <el-card>
                            <h1 style="font-size: 1.4em">新任务</h1>
                            <el-row>
                                <el-col :push="5">
                                    <el-form :model="missionForm" status-icon :rules="rules" ref="missionForm"
                                             label-width="150px"
                                             style="margin-top: 10px;color: #1f2d3d">
                                        <el-form-item class="form-label" label="任务名称" prop="taskName">
                                            <el-col :span="19">
                                                <el-input v-model="missionForm.taskName" placeholder="任务名"
                                                          maxlength="11" autocomplete="off"></el-input>
                                            </el-col>
                                        </el-form-item>
                                        <el-form-item class="form-label" label="任务描述" prop="remark">
                                            <el-col :span="19">
                                                <el-input v-model="missionForm.remark" placeholder="任务描述"
                                                          maxlength="20" autocomplete="off"></el-input>
                                            </el-col>
                                        </el-form-item>
                                        <el-form-item class="form-label" label="通信调查点点文件" prop="nodeFile">
                                            <el-col :span="19">
                                                <el-upload
                                                        class="upload-demo"
                                                        ref="uploadNode"
                                                        name="nodeFile"
                                                        action="777"
                                                        drag
                                                        :file-list="fileList"
                                                        :limit="1"
                                                        :on-error="uploadFalse"
                                                        :auto-upload="false"
                                                        :http-request="uploadNodeFile"
                                                >
                                                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                                                    <!--                                                    <div slot="tip" class="el-upload__tip" style="color:red">上传文件只能是 xls、xlsx、txt 格式!</div>-->
                                                </el-upload>
                                            </el-col>
                                        </el-form-item>
                                        <!--                                        <el-form-item class="form-label" label="通信调查原始文件" prop="uploadFile">-->
                                        <!--                                            <el-col :span="19">-->
                                        <!--                                                <el-upload-->
                                        <!--                                                        class="upload-demo"-->
                                        <!--                                                        ref="upload"-->
                                        <!--                                                        :action="uploadUrl()"-->
                                        <!--                                                        name="uploadFile"-->
                                        <!--                                                        drag-->
                                        <!--                                                        :file-list="fileList"-->
                                        <!--                                                        :limit="1"-->
                                        <!--                                                        :on-error="uploadFalse"-->
                                        <!--                                                        :on-success="uploadSuccess"-->
                                        <!--                                                        :auto-upload="false"-->
                                        <!--                                                        :http-request="uploadFile"-->
                                        <!--                                                >-->
                                        <!--                                                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>-->
                                        <!--                                                    &lt;!&ndash;                                                    <div slot="tip" class="el-upload__tip" style="color:red">上传文件只能是 xls、xlsx、txt 格式!</div>&ndash;&gt;-->
                                        <!--                                                </el-upload>-->
                                        <!--                                            </el-col>-->
                                        <!--                                        </el-form-item>-->
                                        <el-form-item>
                                            <el-col :span="19">
                                                <el-button class="submit-button" type="info"
                                                           @click="submitForm('missionForm')"
                                                           v-loading.fullscreen.lock="fullscreenLoading"
                                                           style="width: 100%">保存
                                                </el-button>
                                            </el-col>
                                        </el-form-item>
                                    </el-form>
                                </el-col>
                            </el-row>
                            <el-divider></el-divider>
                            <msg-dialog @yes="onCancel" @no="to(HomePage)" :dialog-visible="dialogVisible"
                                        :msg="msg"></msg-dialog>
                        </el-card>
                    </el-row>
                </el-col>
            </el-row>
        </el-main>
    </el-container>
</template>

<script>
    import qs from 'qs';
    import MsgDialog from "../../../../components/admin/menu/MsgDialog";

    export default {
        name: "NewMission",
        components: {MsgDialog},
        data() {
            return {
                msg: '任务发布成功,是否继续发布新任务',
                HomePage: 'CorrespondTl',
                dialogVisible: false,
                missionForm: {
                    taskName: '',
                    remark: '',
                    type: 6
                },
                rules: {
                    taskName: [],
                    remark: []
                },
                fileData: '',  // 文件上传数据（多文件合一）
                fileList: [],
                fullscreenLoading: false
            }
        },
        mounted() {

        },
        methods: {
            uploadNodeFile(nodeFile) {
                this.fileData.append('nodeFile', nodeFile.file);
                this.fileData.append('taskName', this.missionForm.taskName);
                this.fileData.append('remark', this.missionForm.remark);
                this.fileData.append('type', this.missionForm.type);
                axios.post(this.uploadUrl(),
                    this.fileData
                ).then(res => {
                    if (res.status === 200) {
                        this.uploadSuccess(res);
                        this.fullscreenLoading = false;
                    } else {
                        this.uploadFalse();
                    }
                });
            },
            uploadUrl() {
                return "/bjdzms/releaseTask/uploadTask";
            },
            to(path) {
                this.$router.push({name: path});
            },
            //文件上传成功触发
            uploadSuccess(response) {
                if (response.data.flag) {
                    this.dialogVisible = true;
                } else {
                    this.$message({
                        message: '导入失败',
                        type: 'error'
                    });
                }
            },
            //文件上传失败触发
            uploadFalse() {
                this.$message({
                    message: '文件上传失败！',
                    type: 'error'
                });
            },
            // 上传前对文件的大小和类型的判断
            beforeAvatarUpload(file) {
                this.form.fileName = file.name;
                const extension = file.name.split(".")[1] === "xls";
                const extension2 = file.name.split(".")[1] === "xlsx";
                const extension3 = file.name.split(".")[1] === "txt";
                if (!extension && !extension2 && !extension3) {
                    this.$message({
                        message: '上传文件只能是 xls、xlsx、txt 格式!',
                        type: 'error'
                    });
                }
                return extension || extension2 || extension3;
            },
            //表单提交
            submitForm(form) {
                this.$refs.missionForm.validate((valid) => {
                    if (valid) {
                        //触发组件的action
                        this.fullscreenLoading = true;
                        this.fileData = new FormData();
                        this.$refs.uploadNode.submit();
                    } else {
                        //console.log('error submit!!');
                        return false;
                    }
                });
            },
            //表单取消
            onCancel(form) {
                // this.$refs.upload.clearFiles();
                this.$refs.uploadNode.clearFiles();
                this.$refs.missionForm.resetFields();
                this.dialogVisible = false;
            }
        }
    }
</script>

<style>
    .el-upload-dragger {
        height: 40px !important;
    }
</style>

<style scoped>
    .el-header {
        background: #EBEBEB;
        color: #e5e9ef;
        font-size: 2em;
        line-height: 80px;
        border: 5px solid #EBEBEB;
    }

    .el-main {
        background: #fff;
    }

    .el-container {
        height: 100%;
    }

    .el-form-item {
        width: 610px;
    }

    .disabled .el-upload-picture-card {
        display: none;
    }

    .title {
        font-size: 14px;
        color: #97a8be;
        font-weight: 400 !important;
    }
</style>

